<template>
  <div class="SaleImgSetting">
    <div class="ele-title">
      <h3>图片</h3>
      <p class="ele-little-title">最多添加1张，建议尺寸750x350像素</p>
    </div>
    <div class="content">
      <el-card>
        <el-form ref="cardForm" :model="cardForm" :rules="rules" label-width="100px" label-position="left">
          <el-col :span="6" style="margin-bottom: 22px">
            <sku-img v-model="cardForm.url" />
          </el-col>
          <el-col :span="18">
            <el-form-item prop="title" label="标题" style="margin-top: 10px">
              <el-col :span="22">
                <el-input v-model="cardForm.title" placeholder="请输入标题" />
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
/** 商品 tabs */
import { addRecommendPic, getRecommendPic } from '@/api/customAPI/shop/homeSetting'
import SkuImg from '@/components/SkuImg'
export default {
  name: 'SaleImgSetting',
  components: {
    SkuImg
  },

  data() {
    return {
      model: null,
      cardForm: {
        title: null,
        url: null
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    setModel(model) {
      this.model = parseInt(model)
      getRecommendPic({ type: 'sale' }).then(res => {
        if (res.data.data) {
          this.cardForm.title = res.data.data.title
          this.cardForm.url = res.data.data.url
        }
      })
    },
    submitSaleImg() {
      this.$refs.cardForm.validate(validate => {
        if (validate) {
          if (!this.cardForm.url) {
            return this.$message.error('请上传热卖图片')
          } else {
            this.cardForm.type = 'sale'
            addRecommendPic(this.cardForm).then(res => {
              this.$message.success('添加热卖商品图片成功')
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.SaleImgSetting {
}
</style>
